<template>
  <div class="grass-situation-root">
    <lark-map
      ref="mmap"
      :query-back-fun="queryBackFun"
      :map-config="bufferMapConfig"
      @loaded="load"
      :before-query="beforeQuery"
      :after-query="afterQuery"
    ></lark-map>
  </div>
</template>

<script>
import mapConfig from "../../../../datas/mapConfig";
import { reactive, toRefs, onMounted, ref } from "@vue/composition-api";
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import DataUtils from "@/utils/yc/DataUtils";
import {
  highlightByGeometryList,
  getGeometryListByQueryResult,
  getAttributesListByQueryResult,
  queryResultsByUrls,
  getTabsDataByQueryResult,
  unionGeometry,
  queryByGeometry,
  openPopup,
  getMapViewState,
  getOnlyResByQueryResult
} from "lark-map";
import QueryUtils from "@/utils/yc/QueryUtils";
export default {
  data() {
    return {
      view: null //地图对象
    };
  },
  props: {},
  components: {},
  setup(props, content) {
    const data = reactive({
      bufferMapConfig: mapConfig
    });
    DataUtils.initJsonData();
    return { ...toRefs(data) };
  },
  //方法
  methods: {
    //地图加载完成的回调
    load(view) {
      this.view = view?.mapView;
      if (this.view) {
        let layer = new GraphicsLayer({id: "areaLayer"});
        this.view.map.layers.add(layer);
        QueryUtils.queryAreaByCode("xzq",this.view,'150125');
        this.queryByPoint();
      }
    },

    //    点查回调
    async queryBackFun(res, mapPoint) {
      let { view } = this;
      let geometryList = getGeometryListByQueryResult({
        res: getOnlyResByQueryResult({ res, mapPoint }),
        merge: true
      });

      highlightByGeometryList({ view, geometryList});
      // let result = await this.test()
      //返回值是显示弹出窗口内容，可以返回数据或者dom节点
      return "555";
    },

    /**
     * 空间查询，根据点MapPoint进行空间查询
     */
    async queryByPoint() {
      let { view } = this;
      if (!view) return;
      view.on("click", async event => {
        if (getMapViewState() === "occupied") return;
        let { mapPoint: geometry } = event;
        let res = QueryUtils.queryByGeometry("xzq",this.view,geometry);
      });
    },

    beforeQuery() {
      console.log("before");
    },
    afterQuery() {
      console.log("after");
    }
  }
};
</script>

<style scoped lang="scss">
$full: 100%;
.grass-situation-root {
  height: $full;
  width: $full;
}
</style>
